<!--
 * @Autor: CQJ
 * @Date: 2022-08-18 23:25:06
 * @LastEditors: CQJ
 * @LastEditTime: 2022-08-19 00:25:36
 * @Description:
-->
<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span class="card-header-leftText">系统信息</span>
        </div>
      </template>
      <el-descriptions :column="3" border>
        <el-descriptions-item label="程序版本：">{{
          info.version
        }}</el-descriptions-item>
        <el-descriptions-item label="技术/BUG反馈：">{{
          info.tel
        }}</el-descriptions-item>
        <el-descriptions-item label="官方地址：">{{
          info.address
        }}</el-descriptions-item>
        <el-descriptions-item label="服务器系统">
          <el-tag size="small">{{ info.serverSystem }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="WEB服务器："
          >{{ info.webServer }}
        </el-descriptions-item>
        <el-descriptions-item label="Thinkphp版本："
          >{{ info.thinkPhp }}
        </el-descriptions-item>
        <el-descriptions-item label="服务器 (IP/端口)："
          >{{ info.ip }}
        </el-descriptions-item>
        <el-descriptions-item label="PHP版本："
          >{{ info.phpVersion }}
        </el-descriptions-item>
        <el-descriptions-item label="允许上传文件最大值："
          >{{ info.maxSize }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import { toRefs } from 'vue';
import { SysInfoType } from '@/types/api/dashboard/dashboard';
interface stsData {
  info: SysInfoType;
}
const props = defineProps<stsData>();
const { info } = toRefs(props);
</script>

<style lang="scss" scoped>
.card-header {
  &-leftText {
    font-size: 18px;
    font-weight: bold;
  }
  &-rightText {
    font-size: 18px;
    color: #409eff;
  }
  &-rightText:hover {
    cursor: pointer;
  }
}
</style>
